/*
 * Copyright 2021 Shulie Technology, Co.Ltd
 * Email: shulie@shulie.io
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@textColor: #d1d3dd;
@formItemBg: #383a43;

* {
  font-size: 12px;
}

.searchWrap {
  // height: 144px;
  // padding: 8px 31px 64px 31px;
  // padding: 4px 24px 60px 24px;
  background: #1d2530;
  border: none;

  :global {
    .ant-input,
    .ant-select-selection {
      background: @formItemBg;
      border-radius: 4px;
      border: 1px solid #57575a;
      color: @textColor;
      font-size: 12px;
    }
    .ant-cascader-picker {
      background: @formItemBg;
      border-radius: 4px;
      color: @textColor;
      font-size: 12px;
      height: 32px;
    }
    .ant-select-arrow .ant-select-arrow-icon {
      color: #979797;
    }
    .ant-calendar-picker-icon {
      color: #9fa2c4;
    }
    .ant-cascader-picker-arrow {
      color: #cacce5;
    }
    .ant-btn-primary {
      // background: #3e95ef;
      border-radius: 4px;
      border: none;
    }

    .ant-select-selection__clear,
    .ant-cascader-picker-clear,
    .ant-calendar-picker-clear,
    .ant-calendar-range-picker-separator {
      background: none;
      color: #fff;
    }
  }
}

.titleNode {
  // margin-top: 8px;
  height: 36px;
  line-height: 36px;

  .filterWrap {
    width: 100%;
    background: #2b2d33;
    border-radius: 20px;
    padding: 4px 5px;
    box-sizing: border-box;
  }

  // 一级搜索filter样式

  .filterItem {
    position: relative;
    margin-right: 12px;
    background: @formItemBg;
    border-radius: 16px;
    padding: 9px 20px 9px 12px;
    color: @textColor;
    // select样式

    .filterSelect {
      position: relative;
      width: auto;
      &::after {
        content: '';
        display: table;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px;
        border-color: #cacce5 transparent transparent transparent;
        right: -10px;
        top: calc(50% - 2px);
      }
      :global {
        .ant-select-selection__choice {
          color: @textColor;
          border: 1px dashed #50cbc5;
          background: #383a43;
        }

        .ant-select-selection--multiple > ul > li,
        .ant-select-selection--multiple
          .ant-select-selection__rendered
          > ul
          > li {
          margin-top: 2px;
        }

        .ant-select-selection__clear {
          transform: translate(6px, -1px) !important;
        }

        .ant-select-selection-selected-value {
          color: #cacce5;
        }

        .ant-select-selection__choice__content {
          color: #50cbc5;
        }

        .ant-select-selection--multiple
          .ant-select-selection__choice__remove
          * {
          color: #50cbc5;
        }

        .ant-select-selection,
        .ant-select-focused,
        .ant-select-enabled {
          border: none !important;
          background: none;
          outline: none !important;
          box-shadow: none !important;
        }
      }
    }
  }
  :global {
    * {
      color: @textColor;
    }
  }
}

.tableWrap {
  margin: 16px 0px 0px !important;
  // margin: 16px 0px 86px !important;
  transform: translateY(-68px);
  // background: linear-gradient(to bottom, #eeeef8 0%, #ffffff 10%) !important;
  border-radius: 4px !important;
  border: 1px solid #dedfe9;

  .reloadIcon {
    svg {
      font-weight: bold;
      cursor: pointer;
      font-size: 16px !important;
    }
  }
  // min-height: 700px;
  // padding   : 16px;
  :global {
    .ant-table-column-title {
      color: #a7a9bf;
      font-weight: 400;
    }

    .ant-badge-status-text {
      font-size: 12px;
    }

    .ant-card-head-title {
      padding-top: 0;
    }

    .ant-tabs-tab {
      font-size: 14px;
    }
  }
}

.brand-checkbox {
  :global {
    .ant-checkbox-wrapper {
      color: @textColor;

      .ant-checkbox-inner {
        background-color: #555761;
        border-color: #848592;
        border-radius: 4px;
      }

      .ant-checkbox-checked .ant-checkbox-inner::after {
        border-color: #50cbc5;
      }
    }
  }
}

.footer {
  position: fixed;
  width: calc(100% - 192px);
  // width: calc(100% - 112px);
  right: 16px;
  bottom: 0;
  padding: 8px 24px;
  z-index: 100;
  box-shadow: 0px 4px 10px 0px rgba(51, 55, 75, 0.08);
  background-color: #fff;
  border-top: 1px solid #f2f3f3;
}

:global {
  .ant-select-dropdown {
    // min-width: 200px !important;
    width: auto;
  }
}
